<template>
  <div class="employee-role-container">
    <div>
      <!-- 选择 -->
      <el-row class="employee-role-row" v-if="!isAdd">
        <el-col :span="14" style="text-align:left;padding-left:15px" class="employee-role-row-col">
          <div style="padding: 0 10px">选择角色</div>
          <el-select v-model="roleId" placeholder="请选择" style="width: 30%" size="small" @change="selectRole(roleId)">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
          <div style="padding: 0 10px">
            <el-button type="text" @click="disName = true"><i class="el-icon-edit"/></el-button>
            <el-button type="text" @click="del"><svg-icon icon-class="shanchu"/></el-button>
          </div>
        </el-col>
        <el-col :span="10" style="text-align:right;padding-right:40px">
          <el-button type="primary" size="small" style="padding:8px 30px;" @click="add">新 增</el-button>
        </el-col>
      </el-row>
      <!-- 新增 -->
      <el-row class="employee-role-row" v-else>
        <el-col :span="14" style="text-align:left;padding-left:15px" class="employee-role-row-col">
          <div style="padding: 0 10px">请输入角色名</div>
          <el-input v-model="role.title" placeholder="请输入角色名" style="width: 30%" size="small"/>
        </el-col>
        <el-col :span="10" style="text-align:right;padding-right:40px">
          <div style="color: #fff">1</div>
        </el-col>
      </el-row>
    </div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-divider></el-divider>
    <el-scrollbar :wrapStyle="{height:'calc(100vh - 320px)'}" :viewStyle="{height:'calc(100vh - 330px)'}" :noresize="true">
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <div class="check-content" v-for="role in actionList" :key="role.id">
          <div style="width: 10%">
            <el-checkbox :label="role.id" @change="b => roleChange(b,role.id)">{{ role.title }}</el-checkbox>
          </div>
          <div style="width: 90%">
            <el-row class="check-content-role-one" v-for="one in role.one_list" :key="one.id">
              <el-col :span="4">
                <el-checkbox :label="one.id" @change="b => oneChange(b,role.id,one.id)">{{ one.title }}</el-checkbox>
              </el-col>  
              <el-col :span="20" class="check-content-role-one-two">
                <el-checkbox v-for="two in one.two_list" :key="two.id" :label="two.id" style="width:150px;height:30px">{{ two.title }}</el-checkbox>
              </el-col>        
            </el-row>
          </div>
          <el-divider></el-divider>
        </div>
      </el-checkbox-group>
    </el-scrollbar>
    
    <div style="text-align:center;margin-top:20px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">提 交</el-button>      
    </div>


    <!-- 修改名称 -->
    <el-dialog title="修改名称" :visible.sync="disName" width="30%">
      <div>
        <span style="padding: 0 10px">角色名称：</span>
        <el-input v-model="role.title" placeholder="请输入角色名称" size="small" style="width: 60%"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="disName = false">取 消</el-button>
        <el-button type="primary" @click="putName">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getActionList, getRoleList, putRole, postRole, delRole } from '@/api/employee'

export default {
  name: 'setting-role',
  data() {
    return {
      actionList: [],
      roleList: [],

      roleId: '',

      isAdd: false,

      role: {
        title: '',
        status: '1',
        rules: '',
        key: this.$store.state.app.activeApp.saa_key
      },

      isIndeterminate: true,
      checkAll: [],
      checkedCities: [],

      // role: {},

      disName: false
    }
  },
  computed: {
    options() {
      let arr = [];
      this.actionList.forEach(role => {
        arr.push(role.id);
        if(role.one_list) {
          role.one_list.forEach(one => {
            arr.push(one.id);
            if(one.two_list) {
              one.two_list.forEach(two => {
                arr.push(two.id);
              })
            }
          })
        }
      });
      return arr;
    }
  },
  watch: {
    role(val) {
      if(val.rules) {
        this.checkedCities = val.rules.split(',').filter(item => item !== '');
      }else{
        this.checkedCities = [];
      }
    },
    checkedCities(val) {
      val.forEach((item,index) => {
        if(index < val.length-1) {
          this.role.rules += item + ',';
        }else{
          this.role.rules += item;
        }
      })
    }
  },
  mounted() {
    this.getActionList();
    this.getRoleList();
  },
  methods: {
    /**
     * 新增
     */
    add() {
      this.role = {
        title: '',
        status: '1',
        rules: '',
        key: this.$store.state.app.activeApp.saa_key
      }
      this.isAdd = true;
    },
    /**
     * 删除
     */
    del() {
      delRole({key:this.$store.state.app.activeApp.saa_key,id:this.role.id}).then(res => {
        if(res.status === 200) {
          this.$message.success('删除成功！');
          this.disName = false;
          this.getRoleList();
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 提交
     */
    submit() {
      if(this.isAdd) {
        postRole(this.role).then(res => {
          if(res.status === 200) {
            this.$message.success('添加成功！');
            this.isAdd = false;
            this.getRoleList();
          }else{
            this.$message.error(res.message);
          }
        })
      }else{
        const params = {
          key: this.$store.state.app.activeApp.saa_key,
          rules: this.role.rules,
          id: this.role.id
        };

        putRole(params).then(res => {
          if(res.status === 200) {
            this.$message.success('修改成功！');
            this.isAdd = false;
            this.getRoleList();
          }else{
            this.$message.error(res.message);
          }
        })
      }
    },
    /**
     * 修改名称
     */
    putName() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        id: this.role.id,
        title: this.role.title
      };

      putRole(params).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
          this.disName = false;
          this.getRoleList();
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取功能列表
     */
    getActionList() {
      getActionList({key: this.$store.state.app.activeApp.saa_key}).then(res => {
        if(res.status === 200) {
          this.actionList = res.data;
          
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取角色列表
     */
    getRoleList() {
      getRoleList({key: this.$store.state.app.activeApp.saa_key}).then(res => {
        if(res.status === 200) {
          this.roleList = res.data;
          this.role = this.roleList[0]; 
          this.roleId = this.roleList[0].id;
        }else if(res.status === 204) {
          this.roleList = [];
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 切换角色
     */
    selectRole(id) {
      this.role = this.roleList.find(item => item.id === id);
    },
    /**
     * 全选
     */
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.options : [];
      this.isIndeterminate = false;
    },
    /**
     * 勾选
     */
    handleCheckedCitiesChange(val) {
      this.checkedCities = val;
    },
    roleChange(val,id) {
      const role = this.actionList.find(item => item.id === id);
      let arr = [];
      if(role.one_list) {
        role.one_list.forEach(one => {
          arr.push(one.id);
          if(one.two_list) {
            one.two_list.forEach(two => {
              arr.push(two.id);
            })
          }
        })
      }

      arr.forEach(item => {
        if(val) {
          if(this.checkedCities.indexOf(item) < 0) {
            this.checkedCities.push(item);
          }
        }else{
          this.checkedCities.splice(this.checkedCities.indexOf(item),1);
        }
      })
    },
    oneChange(b, roleId, id) {
      // console.log(b, roleId, id)
      const role = this.actionList.find(item => item.id === roleId);
      const one = role.one_list.find(item => item.id === id);

      let arr = [];
      if(one.two_list) {
        one.two_list.forEach(two => {
          arr.push(two.id);
        })
      }

      arr.forEach(item => {
        if(b) {
          if(this.checkedCities.indexOf(item) < 0) {
            this.checkedCities.push(item);
          }
        }else{
          this.checkedCities.splice(this.checkedCities.indexOf(item),1);
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.employee-role-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.employee-role-row{
  margin: 15px 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &-col{
    padding: 0 15px;
    max-width: 95%;
    overflow: hidden;
    display: flex;
    &>div{
      display: inline-block;
    }
  }
}
.check-content{

  &>div{
    display: inline-block;
    vertical-align: top;
  }
  &-role{
    width: 150px;
    vertical-align: top;
    &-one{
      min-height: 30px;
      margin-bottom:15px;
      &>div{
        display:inline-block;
      }
      &-two{
        max-width: calc(100vh - 1px);
        vertical-align: top
      }
    }
  }
}
</style>